<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="/public/bootstrap.min.css">
  <link rel="stylesheet" href="/public/bootstrap-icons-141.css">
  <link rel="stylesheet" href="/public/style-light.css">
  
  <script src="/public/jquery.min.js"></script>
  <script src="/public/dayjs.min.js"></script>
  <script src="/public/bootstrap.bundle.min.js"></script>
  <script src="/public/util.js"></script>
  <script src="/public/filelist.js"></script>
  
  <title>Search - localtags</title>
</head>
<body>
  <div id="root" class="container" style="max-width: 775px; min-width: 400px;"></div>
  <script>
    
const Alerts = CreateAlerts();

const [InfoBtn, InfoMsg] = CreateInfoPair('使用说明', [
  '搜索标签是精确搜索，区分大小写。搜索文件名不分大小写。',
  '搜索标签和文件名都不会列出回收站里的文件，搜索 ID 则包括回收站里的文件。',
]);

const Navbar = {
  view: () => m('nav').addClass('navbar navbar-light bg-light').append([
    m('div').addClass('container-fluid').append([
      m('a').attr({title:'main menu',href:'/light/home',type:'button'}).addClass('btn btn-outline-dark').append(
        m('i').addClass('bi bi-house-door'),
      ),
      m('span').addClass('navbar-brand').append([
        'Search', ' ', m(InfoBtn),
      ]),
      m('a').attr({title:'All Tags',href:'/light/tags',type:'button'})
        .addClass('btn btn-outline-dark').append(
          m('i').addClass('bi bi-tags')
      ),
    ]),
  ]),
};

const ByTags = cc('input');
const ByTitle = cc('input');
const ByID = cc('input');
const SearchInput = cc('textarea');
const SubmitBtn = cc('button');
const SearchForm = {
  view: () => m('form').append([
    m('span').text('Search by').css({marginRight:'1em'}),
    m('div').addClass('form-check form-check-inline').append([
      m(ByTags).addClass('form-check-input').attr({type:'radio',name:'search-by',value:'tags'}).prop('checked', true),
      m('label').addClass('form-check-label').text('Tags').attr({for:ByTags.raw_id}),
    ]),
    m('div').addClass('form-check form-check-inline').append([
      m(ByTitle).addClass('form-check-input').attr({type:'radio',name:'search-by',value:'title'}),
      m('label').addClass('form-check-label').text('File Name').attr({for:ByTitle.raw_id}),
    ]),
    m('div').addClass('form-check form-check-inline').append([
      m(ByID).addClass('form-check-input').attr({type:'radio',name:'search-by',value:'id'}),
      m('label').addClass('form-check-label').text('ID').attr({for:ByID.raw_id}),
    ]),
    m(SearchInput).addClass('form-control').attr({rows:2}).prop({autofocus:true,required:true}),
    m('p').addClass('text-end mt-2').append([
      m(SubmitBtn).text('search').attr({type:'submit'}).addClass('btn btn-primary').click(SearchForm.onsubmit),
    ]),
  ]),
  onsubmit: (event) => {
    event.preventDefault();
    const pattern = $(SearchInput.id).val().trim();
    if (!pattern) {
      Alerts.insert('info', '请输入搜索内容');
      $(SearchInput.id).focus();
      return;
    }
    const searchBy = $('input[name="search-by"]:checked').val();
    if (searchBy == 'tags') SearchForm.searchTags();
    if (searchBy == 'title') SearchForm.searchTitle();
    if (searchBy == 'id') SearchForm.searchByID();
  },
  searchTags: () => {
    const tagSet = tagsStringToSet($(SearchInput.id).val());
    Alerts.clear();
    Alerts.insert('info', 'searching tags: ' + addPrefix(tagSet, '#'));
    const tags = Array.from(tagSet);
    const body = new FormData()
    body.append('tags', JSON.stringify(tags));
    const options = {method:'POST',url:'/api/search-tags',alerts:Alerts,buttonID:SubmitBtn.id,body:body};
    SearchForm.search(options);
  },
  searchTitle: () => {
    const pattern = $(SearchInput.id).val().trim();
    Alerts.clear();
    Alerts.insert('info', 'searching title: ' + pattern);
    const body = new FormData();
    body.append('pattern', pattern);
    const options = {method:'POST',url:'/api/search-title',alerts:Alerts,buttonID:SubmitBtn.id,body:body};
    SearchForm.search(options);
  },
  searchByID: () => {
    const fileid = $(SearchInput.id).val().trim();
    Alerts.clear();
    Alerts.insert('info', `查找文件 [id:${fileid}] 及与其重名的文件...`);
    const body = new FormData();
    body.append('id', fileid);
    const options = {method:'POST',url:'/api/search-by-id',alerts:Alerts,buttonID:SubmitBtn.id,body:body};
    SearchForm.search(options);
  },
  searchDamaged: () => {
    Alerts.clear();
    Alerts.insert('primary', '高级功能：查找数据库中的全部损坏文件...');
    const options = {method:'GET',url:'/api/search-damaged',alerts:Alerts,buttonID:SubmitBtn.id};
    SearchForm.search(options);
  },
  search: (options) => {
    ajax(options, SearchForm.onSuccess, SearchForm.onFail);
  },
  onSuccess: (files) => {
    if (!files || !files.length) {
      Alerts.insert('danger', '找不到相关文件');
      FileList.clear();
      return;
    }
    Alerts.insert('success', `找到 ${files.length} 个文件`);
    FileList.clear();
    FileList.append(files);
  },
  onFail: () => {
    FileList.clear();
  },
};

$('#root').append([
  m(Navbar).addClass('mt-2 mb-5'),
  m(InfoMsg).hide(),
  m(SearchForm),
  m(Alerts),
  m(FileList).addClass('mt-3'),
  m(Spacer),
  m(BottomLine),
]);

init()

function init() {
  console.log('高级功能：使用命令 "delete_file(id)" 把文件扔进回收站，以后可去回收站找回文件。');

  const tags = getUrlParam('tags');
  if (tags) {
    $(SearchInput.id).val(tags);
    $(SubmitBtn.id).click();
    return;
  }
  const fileid = getUrlParam('fileid');
  if (fileid) {
    $(SearchInput.id).val(fileid);
    $(ByID.id).click();
    $(SubmitBtn.id).click();
    return;
  }
  const filter = getUrlParam('filter');
  if (filter == 'damaged') {
    SearchForm.searchDamaged();
  }
}

  </script>
</body>
</html>